<template>
  <div class="pop-box-right flex-column" :class="showRight ? 'active' : ''">
    <div
      v-if="fullScreen"
      :class="['prop-btn', showRight ? 'prop-btn-active' : '']"
      @click="$debounce(showRightFn, !showRight, params, !showRight ? 'open' : 'close')"
    >
      <span v-if="!showRight" style="margin-left: -4px">《</span>
      <span v-else>》</span>
    </div>
    <div class="flex-1" style="overflow: hidden">
      <BizList
        v-show="clickProp === 'selectNode'"
        ref="BizList"
        :show-right="showRight"
        :params="params"
        @restore="restore"
        @reduction="reduction"
        @close="$emit('close')"
        @refresh="$emit('refresh')"
      />
      <LinkList
        v-show="clickProp === 'selectEdge'"
        ref="LinkList"
        :show-right="showRight"
        :params="params"
      />
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import BizList from './BizList.vue'
  import LinkList from './LinkList.vue'
  export default {
    components: {
      BizList,
      LinkList
    },
    data() {
      return {
        showRight: false,
        pageData: {
          page: 1,
          size: 20,
          total: 0
        },
        tableData: [],
        generalRestoreStatus: {},
        clickProp: '',
        params: {
          trigger: false,
          clickProp: 'selectNode' // 默认展示关联业务
        },
        closeStatus: '' // close表示用户主动关闭 open标识用户主动打开
      }
    },
    computed: {
      ...mapGetters(['baseRegionList', 'dictList', 'fullScreen'])
    },
    methods: {
      showRightFn(showRight, params, closeStatus) {
        console.log('右侧弹窗出现', showRight, params, closeStatus)
        this.$emit('rightVisiableChange', showRight)
        this.showRight = showRight
        this.$store.commit('setIndexShowRight', showRight)
        if (!showRight) return
        this.clickProp = params ? params.clickProp : 'selectNode'
        this.params = params
        closeStatus && (this.closeStatus = closeStatus)
        if (showRight) {
          if (this.clickProp === 'selectNode' && !this.params.trigger) {
            this.$refs.BizList && this.$refs.BizList.loadData()
          }
          if (this.clickProp === 'selectEdge' && !this.params.trigger) {
            this.$refs.LinkList && this.$refs.LinkList.loadData()
          }
        }
        this.params.trigger = false
      },
      sizeChange(size) {
        this.pageData.size = size
      },
      currentChange(page) {
        this.pageData.page = page
      },
      restore(data) {
        this.$emit('restore', data)
      },
      reduction(data) {
        this.$emit('reduction', data)
      }
    }
  }
</script>
<style lang="scss">
  @import '@/assets/css/mixin.module.scss';
  .pop-box-right {
    position: relative;
    right: 0;
    top: 0px;
    width: 0;
    height: 100%;
    font-size: 14px;
    transition: all 0.5s ease;
    border: none;
    z-index: 10;
    user-select: none;
    @include themeify {
      background: rgba($color: themed('topoBg'), $alpha: 0.95);
    }

    &.active {
      width: 480px;
      @include themeify {
        border: 1px solid themed('tableBorderColor');
      }
    }

    .prop-btn {
      position: absolute;
      left: -9px;
      top: 50%;
      margin-top: -50px;
      width: 10px;
      height: 100px;
      font-size: 12px;
      line-height: 100px;
      text-align: center;
      @include themeify {
        // background: themed('topoPropBtn');
        // color: themed('topoBg');
        background: rgba($color: themed('homeBoxBgColor'), $alpha: 0.6);
        color: themed('textColor');
        border: 1px solid themed('tableBorderColor');
      }
      border-radius: 30px 0 0 30px;
      cursor: pointer;
    }

    .prop-btn-active {
      left: -9px;
    }

    .route-item {
      margin-top: 10px;
      padding: 5px 10px;
      word-break: break-all;
      cursor: pointer;
      @include themeify {
        color: themed('textColor');
        border: 1px solid themed('tableBorderColor');
      }

      &:hover {
        @include themeify {
          background: rgba($color: themed('tabsActiveBgColor'), $alpha: 0.3);
        }
      }

      &.active {
        @include themeify {
          background: rgba($color: themed('tabsActiveBgColor'), $alpha: 0.6);
        }
      }
    }
  }
</style>
